<template>
  <view class="cart-item">
    <view class="cart-item-left">
      <view class="cart-item-left-img">
        <view v-if="item.is_buy == 0" class="expire-bg">已失效</view>
        <image :src="item.cover" mode="widthFix" />
      </view>
    </view>
    <view class="cart-item-right">
      <view>
        <view class="name">
          <text>{{ item.name }}</text>
        </view>

        <view class="desc" v-if="item.brand_name">品牌：{{ item.brand_name }}</view>
        <view class="desc" v-if="item.component_info">面料：{{ item.component_info }}</view>
        <view class="desc" v-if="item.weight_info">克重：{{ item.weight_info }}</view>
      </view>
      <view class="opt">
        <view></view>
        <view class="opt-right">
          <view class="opt-num">数量：{{ item.buy_number }}</view>
          <view class="opt-price">￥{{ item.price }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'orderItem',
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  border-bottom: 1rpx solid #dcdcdc;
  padding: 35rpx 0;
  .cart-item-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .select {
      width: 40rpx;
      height: 260rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .select-icon {
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        background: transparent;
        border: 2rpx solid var(--main-color);
      }

      .expire-icon {
        border: 2rpx solid #979797;
        background-color: #979797;
      }
    }
    .cart-item-left-img {
      width: 260rpx;
      height: 260rpx;
      margin: 0 14rpx;
      font-size: 0;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .expire-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(151, 151, 151, 0.6);
      color: #fff;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
  }
  &-right {
    flex: 1;
    height: 260rpx;
    color: #545454;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .name {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 28rpx;
      display: flex;
      justify-content: space-between;
      text {
        flex: 1;
        margin-right: 20rpx;
        // 两行
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .x {
        width: 28rpx;
        height: 28rpx;
        margin-top: 4rpx;
        text-align: right;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .desc {
      font-size: 23rpx;
    }
    .opt {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .opt-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .opt-num {
          margin-bottom: 10rpx;
        }
      }
      .opt-price {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
      .opt-num {
        font-size: 23rpx;
        color: #545454;
      }
    }
  }
}
</style>
